<template>
  <div class="banner container">
<!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of slideList" :key="item.id"><a :href="'#/index/product/' + item.id"><img v-lazy="item.img"/></a></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <!-- 侧边栏 -->
    <div class="aside">
      <p class="aside-item">
        <span>手机 电话卡</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>电视 盒子</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>笔记本 平板</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>家电 插线板</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>出行 穿戴</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>耳机 音箱</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>电源 配件</span>
        <span class="iconfont">&#xe665;</span>
      </p>
      <p class="aside-item">
        <span>生活 箱包</span>
        <span class="iconfont">&#xe665;</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      swiperOption: {
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 5000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        effect: "cube",
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
      },
      slideList:[
          {
            id:'42',
            img:'/imgs/slider/slide-1.jpg'
          },
          {
            id:'45',
            img:'/imgs/slider/slide-2.jpg'
          },
          {
            id:'46',
            img:'/imgs/slider/slide-3.jpg'
          },
          {
            id:'47',
            img:'/imgs/slider/slide-4.jpg'
          },
          {
            id:'48',
            img:'/imgs/slider/slide-1.jpg'
          }
        ],
    };
  },
};
</script>

<style lang="scss">
.banner {
  width: 100%;
  height: 451px;
  margin-bottom: 30px;
  position: relative;
  img {
    width: 100%;
    height: 451px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    color: #eee;
  }
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 274px;
  }
  .swiper-pagination-bullet-active {
    background: red;
  }
  .aside {
    width: 264px;
    height: 451px;
    padding: 26px 30px;
    background: #55585a9a;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    .aside-item {
      height: 50px;
      display: flex;
      justify-content: space-between;
      color: rgb(228, 226, 226);
    }
  }
}
</style>